<script lang="ts" setup>
import PageCaontainer from '@/arco-components/PageContainer';
import { ref, computed, watch, onMounted } from 'vue';
import TableIndexList from './components/TableIndexList/index.vue';
import AddIndexDrawer from './components/AddIndexDrawer/index.vue';
import TableDimensionList from './components/TableDimensionList/index.vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const tabKey = ref('index');
const showAdd = ref(false);
const tableListRef = ref();
const onSuccess = () => {
  tableListRef.value.reloadAndRest();
};

onMounted(() => {
  if (route.params?.key) {
    tabKey.value = route.params.key as string;
  }
});
</script>
<template>
  <PageCaontainer>
    <a-card class="model-manage-card">
      <a-tabs v-model:active-key="tabKey" class="data-manage-tab">
        <a-tab-pane key="index" title="指标模型"> </a-tab-pane>
        <a-tab-pane key="dimension" title="维表管理"> </a-tab-pane>
        <template #extra>
          <a-button
            type="primary"
            @click="showAdd = true"
            class="mr-18"
            v-if="tabKey === 'index'"
          >
            创建模型
          </a-button>
        </template>
      </a-tabs>
      <div class="data-manage-card-body">
        <TableIndexList v-if="tabKey === 'index'" ref="tableListRef" />
        <TableDimensionList v-if="tabKey === 'dimension'" />
      </div>
    </a-card>
    <AddIndexDrawer
      v-model:visible="showAdd"
      unmountOnClose
      @success="onSuccess"
    />
  </PageCaontainer>
</template>

<style lang="scss" scoped>
.model-manage-card {
  height: 100%;
  overflow: auto;
  :deep(.arco-card-body) {
    padding: 0;
  }
  &-body {
    // padding: 18px;
  }
}
</style>
